<template>
<view>
	<view class="userAmount" v-if="$route.path.includes('recharge')">
	    <p class="add ff-num">+{{ priceFormat(props.data.amount || 0) }} {{ props.data.coin || '' }}</p>
	    <!-- 充值金额 -->
	<!--    <span>{{ // _t18('recharge_money') }}({{ props.data?.type || '' }})</span>-->
	    <view class="right" style="font-size: 16px;">
	      <!-- 审核中 成功 失败 -->
	      <p class="status0" v-if="props.data.status == 0"><img class="shibai" src="../../../assets/defi/zhong1.png" alt="">{{ _t18('recharge_waiting') }}</p>
	      <p class="status1" v-if="props.data.status == 1"><img class="shibai"  src="../../../assets/defi/cheng.png" alt="">{{ _t18('recharge_tab_success') }}</p>
	      <p class="status2" v-if="props.data.status == 2"><img class="shibai"  src="../../../assets/defi/bai.png" alt="">{{ _t18('recharge_tab_error') }}</p>
	    </view>
	  </view>
	  <view class="userAmount" v-if="$route.path.includes('withdraw')">
	    <p class="reduce ff-num">-{{ priceFormat(props.data.amount || 0) }} {{ props.data.coin || '' }}</p>
	    <!-- 提现金额 -->
	<!--    <span>{{ _t18('withdraw_money') }}({{ props.data?.type || '' }})</span>-->
	    <view class="right" style="font-size: 16px;">
	      <!-- 审核中 成功 失败 -->
	      <p class="status0" v-if="props.data.status == 0"><img class="shibai"  src="../../../assets/defi/zhong1.png" alt=""> {{ _t18('recharge_waiting') }}</p>
	      <p class="status1" v-if="props.data.status == 1"><img class="shibai"  src="../../../assets/defi/cheng.png" alt=""> {{ _t18('recharge_tab_success') }}</p>
	      <p class="status2" v-if="props.data.status == 2"><img class="shibai"  src="../../../assets/defi/bai.png" alt=""> {{ _t18('recharge_tab_error') }}</p>
	    </view>
	  </view>
</view>
</template>

<script setup>
import {_t18} from '@/utils/public'
import {priceFormat} from '@/utils/decimal.js'

const props = defineProps({
  data: {
    type: Object
  },
  amount: {
    type: String
  },
  coin: {
    type: String,
    default: 'USDT'
  }
})
</script>

<style lang="scss" scoped>
.shibai{
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
* {
  font-size: 14px;
  color: var(--ex-default-font-color);
}
.userAmount {
  // margin-top: 61px;
  padding: 50px 0;
  border-bottom: 1px solid var(--ex-border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    margin-bottom: 15px;
    font-size: 35px;
    font-weight: bold;
  }
  p.add {
    color: #000;
  }
  p.reduce {
    color:#000;
  }
  span,
  i {
    font-size: 16px;
    color: var(--ex-passive-font-color);
  }
}
.right {
  p{
    font-size: 16px;
  }
  .status0 {
    color: var(--ex-font-color23);
    display: flex;
  }
  .status1 {
    color: var(--ex-font-color9);
  }
  .status2 {
    color:var(--ex-font-color3);
  }
}
</style>
